<!-- 分类列表卡片 -->
<template>
  <div v-if="categories && categories.length > 0"
    class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-xl dark:bg-stone-950 dark:border-gray-700 shadow-md">
    <!-- 分类标题 -->
    <div class="flex mb-3">
      <h2 class="flex items-center font-bold text-gray-900 uppercase dark:text-white">
        <!-- 文件夹图标 -->
        <svg-icon name="f-category" class="w-4 h-4 mr-1.5 dark:text-white" aria-hidden="true" />
        分类
        <!-- <span
          v-if="categories && categories.length > 0"
          class="ml-2 text-gray-600 font-normal dark:text-gray-300"
          >( {{ categories.length }} )</span
        > -->
      </h2>
      <span class="grow"></span>
      <el-tooltip content="查看更多" placement="bottom">
        <!-- 查看更多 -->
        <a @click="router.push('/category/list')"
          class="bg-white flex items-center px-2.5 py-1 text-xs font-medium text-center text-gray-900 rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700">
          <svg-icon name="more" class="w-5 h-5 dark:text-white" aria-hidden="true" />
        </a>
      </el-tooltip>
    </div>
    <!-- 分类列表 -->
    <div class="text-sm flex flex-wrap gap-3 font-medium text-gray-600 rounded-lg dark:border-gray-600 dark:text-white">
      <a @click="goCategoryArticleListPage(category.id, category.name)" v-for="(category, index) in categories"
        :key="index"
        class="cursor-pointer inline-flex items-center px-3 py-2 text-sm font-medium text-center border rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700 dark:hover:text-white">
        {{ category.name }}
        <span
          class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-sky-800 bg-sky-200 rounded-full">
          {{ category.articlesTotal }}
        </span>
      </a>
    </div>
  </div>
</template>

<script setup>
import { getCategoryList } from "@/api/frontend/category";
import { ref } from "vue";
import { useRouter } from "vue-router";

// 引入路由
const router = useRouter();

// 跳转分类文章列表页
const goCategoryArticleListPage = (id, name) => {
  // 跳转时通过 query 携带参数（分类 ID、分类名称）
  router.push({ path: "/category/article/list", query: { id, name } });
};
// 一次显示的分类数
const size = ref(8);
// 所有分类
const categories = ref([]);
getCategoryList({ size: size.value }).then((res) => {
  if (res.success && res.data != null) {
    categories.value = res.data;
  }
});
</script>
